<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 内嵌宽高 */
            box-sizing: border-box;
        }
        /* div{border: 1px solid black;} */
        /* 整体盒子 */
        .slider{
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
        /* 图片盒子 */
        .slider-wrapper{
            width: 100%;
            height: 320px;         
            transition: all 0.5 ease; 
        }
        .slider-wrapper img{
            width: 100%;
            height: 100%;
            display: block;
            transition: all 0.5 ease;
        }

       

        /* 底部整体盒子 */
        .slider-footer{
            height: 80px;
            background-color:#AB8D6B;
            padding: 12px 12px 0 12px;
            position: relative;
        }
        /* 切换两个按钮盒子 */
        .slider-footer .toggle{
            position:absolute;
            right: 0;
            top: 12px;
            display: flex;
            /* border: 1px solid black;         */
        }
        /* 按钮 */
        .slider-footer .toggle button{
            width: 28px;
            height: 28px;
            margin-right: 12px;
            appearance: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            color: black;
            /* background: rgba(2555, 255, 255, 0.1); */
            opacity: 0.8;

            
        }
        .slider-footer .toggle button:hover{
            opacity: 1;
        }
        /* p标签 */
        .slider-footer p{
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        /* indicator ul 小点 */
        .slider-indicator{
            margin: 0;
            padding: 0;
            margin-left: 10px;
            /* 默认水平从左到右排列 */
            display: flex;
            align-items: center;
            list-style:none;
        }
        .slider-indicator li{
            width: 8px;
            height: 8px;
            margin:4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.8;
            cursor: pointer;
        }
        /* add class 类 */
        /* li带有active类的标签 */
        .slider-indicator li.active{
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="1.png" alt="">
        </div>
        <div class="slider-footer">
            <p></p>
            <ul class="slider-indicator">
                <li data-id="1"></li>
                <li data-id="2"></li>
                <li data-id="3"></li>
                <li data-id="4"></li>
            </ul>
            <div class="toggle">
                <button class="previous"><</button>
                <button class="next">></button>
            </div>
        </div>      
    </div>

    <script>
        const data = [
            {url:'1.png',ch:'索尼相机',color:'#AB8D6B'},
            {url:'2.png',ch:'大学生创业',color:'#C2E1F6'},
            {url:'3.png',ch:'头戴降噪耳机',color:'#0A1F22'},
            {url:'4.png',ch:'旗舰磁轴键盘',color:'#440D73'},
        ]

        let redex = 0;
        const img = document.querySelector('.slider-wrapper img')
        const title = document.querySelector('.slider-footer p')
        const li = document.querySelectorAll('.slider-indicator li')
        const color = document.querySelector('.slider-footer')
        const prev = document.querySelector('.previous')
        const next = document.querySelector('.next')
        const ul = document.querySelector('.slider-indicator')

        fu(redex)
        
        prev.addEventListener('click',function(){
            redex = redex > 0 ? redex-1 : 3
            fu(redex)
        })

        next.addEventListener('click',function(){
            redex = redex < 3 ? redex+1 : 0
            fu(redex)
        })

        function fu(redex){
            li.forEach(item => item.classList.remove('active'))

            img.src = data[redex].url
            title.innerHTML = data[redex].ch
            li[redex].classList.add('active')
            color.style.backgroundColor = data[redex].color
        }
        
        // 
        
        let auto = true

        setInterval(function(){
            if(auto){
                redex = redex < 3 ? redex+1 : 0
                fu(redex)
            }           
        },5000)

        img.addEventListener('mouseenter',auto_off)
        img.addEventListener('mouseleave',auto_off)

        function auto_off(){
            auto = !auto
            console.log('execute')         
        }

        ul.addEventListener('click',function(event){
            redex = event.target.dataset.id - 1 
            fu(redex)
        })
    </script>
</body>
</html>